<template>
  <div class="page bg-white">
    <el-select v-model="checkOptionsList" multiple placeholder="请选择" size="small">
            <el-option v-for="item in departmentList" :key="item.id"  :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button size="small" type="primary" @click="moreDepartment">确 定</el-button>
        <el-button size="small" @click="resetList">清空</el-button>
    <div style="width:100%;text-align:center;font-weight:600;font-size:20px;margin-bottom:10px">
      <p>{{currentYears}}年{{fatherMeanName}}应付报表</p>
    </div>
    <!-- <el-tabs type="border-card" @tab-click="handleClick" v-model="handleClickNum" style="height:100%">
      <el-tab-pane :key="index" v-for="(item, index) in optionsList" :label="item.name" :name="item.id"> -->
        <div class="top">
          <el-table :data="tableData" :cell-style="cellStyle" style="border: 1px solid #d6cfe2;"
            :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName" :summary-method="getSummaries"
            show-summary size="small" class="table">
            <el-table-column type="index" width="200" label="部门" fixed="left" align="center" :index="indexMethod"
              show-overflow-tooltip />
            <el-table-column prop="january" label="1月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'01')">{{scope.row.january}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="february" label="2月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'02')">{{scope.row.february}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="march" label="3月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'03')">{{scope.row.march}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="april" label="4月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'04')">{{scope.row.april}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="may" label="5月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'05')">{{scope.row.may}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="june" label="6月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'06')">{{scope.row.june}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="july" label="7月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'07')">{{scope.row.july}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="august" label="8月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'08')">{{scope.row.august}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="september" label="9月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'09')">{{scope.row.september}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="october" label="10月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'10')">{{scope.row.october}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="november" label="11月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'11')">{{scope.row.november}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="december" label="12月" align="center" show-overflow-tooltip>
              <template slot-scope="scope" show-overflow-tooltip>
                <el-link :underline="false" @click="amountDetails(scope.row ,'12')">{{scope.row.december}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="num" label="合计" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="" label="备注" width="250" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>

      <!-- </el-tab-pane>
    </el-tabs> -->
    <el-dialog width="50%" :visible.sync="costDetailDialog" v-dialogDrag :title="costTitle">
      <el-table :data="costDetailList" :cell-style="cellStyle" style="border: 1px solid #d6cfe2;"
        :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName" :summary-method="getSummaries"
        show-summary size="small" class="table">
        <el-table-column prop="contractNumber" label="合同编号" align="center" show-overflow-tooltip />
        <el-table-column prop="contractName" label="合同名称" align="center" show-overflow-tooltip />
        <el-table-column prop="department.name" label="部门" align="center" show-overflow-tooltip />
        <el-table-column prop="user.name" label="负责人" align="center" show-overflow-tooltip />
        <el-table-column prop="sendamount" label="应收金额" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link :underline="false" @click="threeAmountDetails(scope.row)">{{scope.row.sendamount}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="invoiceamount" label="开票金额" align="center" show-overflow-tooltip />
        <el-table-column prop="invoiceproportion" label="开票比例" align="center" show-overflow-tooltip />
				<el-table-column label="发票信息">
					<template slot-scope="scope">
						<el-button v-if="scope.row.invoiceid!=''" @click="getInvoices(scope.row.invoiceid)" type="text" size="mini">查看发票</el-button>
					</template>
				</el-table-column>
        <el-table-column prop="remarks" label="备注" show-overflow-tooltip />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="costDetailDialog=false">关闭</el-button>
        <el-button size="small" type="primary" @click="costDetailDialog=false">确 定</el-button>
      </div>
    </el-dialog>
		<el-dialog title="发票信息" :visible.sync="addInvoiceDialog" width="70%">
			<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
			      <!-- 搜索框-->
			   <el-form-item prop="invoiceDate">
			          <el-date-picker v-model="searchForm.invoiceDate"
			          	type="date" style="width: 100%;" value-format="yyyy-MM-dd"
			          	format="yyyy-MM-dd" placeholder="开票时间">
			          </el-date-picker>
			   </el-form-item>
			   <el-form-item prop="invoicetype">
			          <el-select v-model="searchForm.invoicetype" placeholder="发票类型"
			          	style="width: 100%;">
			          	<el-option
			          		v-for="(item,index) in $dictUtils.getDictList('invoicebill_type')"
			          		:key="index" :label="item.label" :value="item.value">
			          	</el-option>
			          </el-select>
			   </el-form-item>
			   <el-form-item prop="subType">
			         <el-select v-model="searchForm.subType" placeholder="细分发票类型"
			         	style="width: 100%;">
			         	<el-option
			         		v-for="(item,index) in $dictUtils.getDictList('sub_bill_type')"
			         		:key="index" :label="item.label" :value="item.value">
			         	</el-option>
			         </el-select>
			   </el-form-item>
			    <el-form-item>
			      <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
			      <el-button @click="resetSearch()" size="small">重置</el-button>
			    </el-form-item>
			</el-form>
			<el-table :data="dataList" size="small" height="calc(100% - 80px)"
			:cell-style="cellStyle" style="border:1px solid #d6cfe2;min-height: 400px;" :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName"
				v-loading="invoiceloading" class="table">
				<el-table-column type="selection" header-align="center" align="center" width="50">
				</el-table-column>
				<el-table-column prop="type" show-overflow-tooltip label="发票类型">
					<template slot-scope="scope">
						{{ $dictUtils.getDictLabel("invoicebill_type", scope.row.type, '-') }}
					</template>
				</el-table-column>
				<el-table-column prop="invoiceCode" show-overflow-tooltip label="发票代码">
				</el-table-column>
				<el-table-column prop="invoiceNo" show-overflow-tooltip label="发票号码">
				</el-table-column>
				<el-table-column prop="invoiceDate" show-overflow-tooltip label="开票日期">
				</el-table-column>
				<el-table-column prop="withTaxAmount" show-overflow-tooltip label="含税价格">
				</el-table-column>
				<el-table-column header-align="center" align="center" fixed="right" :key="Math.random()" width="120"
					label="点击查看">
					<template slot-scope="scope">
						<el-image style="width: 100px; height: 50px" :src="scope.row.dmzUrl" :preview-src-list="[scope.row.dmzUrl]"></el-image>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="addInvoiceDialog=false" plain>关闭</el-button>
				<el-button size="small" type="primary" @click="addInvoiceDialog=false" plain>确定</el-button>
			</span>
		</el-dialog>
    <el-dialog width="50%" :visible.sync="threeCostDetailDialog" v-dialogDrag :title="costTitle">
      <el-table :data="threeCostDetailList" :cell-style="cellStyle" style="border: 1px solid #d6cfe2;"
        :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName" :summary-method="getSummaries"
        show-summary size="small" class="table">
        <el-table-column prop="contractNumber" label="合同编号" align="center" show-overflow-tooltip />
        <el-table-column prop="contractName" label="合同名称" align="center" show-overflow-tooltip />
        <el-table-column prop="department.name" label="部门" align="center" show-overflow-tooltip />
        <el-table-column prop="user.name" label="负责人" align="center" show-overflow-tooltip />
        <el-table-column prop="sendamount" label="应收金额" align="center" show-overflow-tooltip />
        <el-table-column prop="unpaidAmount" label="未回款金额" align="center" show-overflow-tooltip />
        <el-table-column prop="signingTime" label="签约时间" align="center" show-overflow-tooltip />
        <el-table-column prop="remark" label="备注" show-overflow-tooltip />
        <!-- <el-table-column prop="data" label="时间" align="center" show-overflow-tooltip/>
                        <el-table-column prop="userName" label="人员" align="center" show-overflow-tooltip/>
                        <el-table-column prop="money" label="金额" align="center" show-overflow-tooltip/>
                        <el-table-column prop="remark" label="备注" show-overflow-tooltip/> -->
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="threeCostDetailDialog=false">关闭</el-button>
        <el-button size="small" type="primary" @click="threeCostDetailDialog=false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import tableStyles from "../../../../utils/mixins.js";
  export default {
    mixins: [tableStyles],
    data() {
      return {
        checkOptionsList:"",
        departmentList:[],
        amountDetailsId: "",
        currentYears: "",
        handleClickNum: 0,
        costTitle: "",
        department: "", //部门id
        currentYears: "", //当前年
        currentMonths: "", //当前月
        //二级科目名称
        header: [],
        optionsList: [{
          id: '0',
          name: '应付总表',
        }],
        //二级科目数据
        tableData: [],
        costDetailDialog: false, //费用明细
        costDetailList: [],
        //三级科目
        threeCostDetailDialog: false,
        threeCostDetailList: [],
				//发票信息
				searchForm: {
					invoiceDate:"",
					invoicetype:"",
					subType:""
				},
				addInvoiceDialog:false,
				dataList: [],
				invoiceloading:false,
				pageNo: 1,
				pageSize: 10,
				total: 0,
      }
    },
    computed: {
      fatherMeanName: {
        get() {
          return this.$store.state.common.fatherMeanName
        }
      },
    },
    mounted() {
      this.getCurrentTime();
      this.getReports();
      this.getCompanyByOffice();
    },
    methods: {
			getInvoices(id){
				this.addInvoiceDialog=true;
				this.refreshList(id);
			},
			refreshList(id) {
				this.invoiceloading = true
				this.$http({
					url: '/zhaohang/invoice/web/companyticket/sysCompanyTicket/getByTickIds',
					method: 'get',
					params: {
						'pageNo': this.pageNo,
						'pageSize': this.pageSize,
						'invoiceid':id,
						...this.searchForm
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.tickets
						this.total = data.page.count
						this.invoiceloading = false
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
      //搜索确定
      moreDepartment(){
            this.department=this.checkOptionsList.join(',');
            this.getReports();
        },
        //搜索清空
        resetList(){
            this.checkOptionsList=[];
            this.department="";
            this.getReports();
        },
      // 表格 表头纵向现实
      indexMethod(index) {
        return this.header[index]
      },
      //选项卡点击
      handleClick() {
        if (this.handleClickNum != 0) {
          this.department = this.handleClickNum;
        } else {
          this.department = "";
        }
        this.getReports();
      },
      // 获取当前时间（年份）
      getCurrentTime() {
        this.currentYears = new Date().getFullYear();
      },
      //金额明细
      amountDetails(row, month) {
        this.costDetailDialog = true
        this.costTitle = row.department.name;
        this.currentMonths = month;
        this.amountDetailsId = row.uniquevalue
        this.department = row.department.id;
        this.$http({
          url: "/rf/send/getSendMonth",
          method: "get",
          params: {
            company: this.$store.state.user.companyId,
            department: this.department,
            strdate: this.currentYears + "-" + this.currentMonths,
            recordunique: this.amountDetailsId,
          },
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.costDetailList = data.list;
          }
        });
      },
      threeAmountDetails(row, column) {
        this.threeCostDetailDialog = true;
        this.$http({
          url: "/rf/send/getSendMonth",
          method: "get",
          params: {
            company: this.$store.state.user.companyId,
            department: this.department,
            strdate: this.currentYears + "-" + this.currentMonths,
            recordunique: this.amountDetailsId,
          },
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.threeCostDetailList = data.list;
          }
        });
      },
      //总表合计
      getSummaries(param) {
        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计 (元)';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' ';
          } else {
            sums[index] = '';
          }
        });

        return sums;
      },
      //进来就执行
      getReports() {
        this.$http({
          url: "/rf/send/getSendReports",
          method: "get",
          params: {
            company: this.$store.state.user.companyId,
            department: this.department
          },
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.tableData = data.list;
            data.list.forEach(item => {
              this.header.push(item.department.name);
            })
          }
        });
      },
      getYearByOffice() {
        this.$http({
          url: "/rf/profit/getYearByOffice",
          method: "get",
          params: {
            company: this.$store.state.user.companyId,
            type: '0',
            department: this.department,
          },
        }).then(({
          data
        }) => {
          if (data && data.success) {
            data.list.forEach(item => {
              this.header.push(item.profitname);
            })
            this.tableData = data.list;
          }
        });
      },
      //查询部门（选项卡）
      getCompanyByOffice() {
        this.$http({
          url: "/sys/office/getCompanyByOffice",
          method: "get",
          params: {
            company: this.$store.state.user.companyId
          },
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.departmentList=data.List;
          }
        });
      },
    }
  }
</script>
<style scoped>

</style>
